<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Quill Editor - 无滚动条版本</title>
		<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
		<style>
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}

			body {
				padding: 0;
				background: #fff;
				font-family: -apple-system, sans-serif;
				height: 100vh;
				overflow: hidden;
				/* 防止页面整体滚动 */
			}

			#editor-container {
				height: 100%;
				display: flex;
				flex-direction: column;
				border-radius: 8px;
				overflow: hidden;
				/* 隐藏容器溢出 */
				box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
			}

			.ql-toolbar.ql-snow {
				border: 1px solid #e0e0e0;
				border-radius: 8px 8px 0 0;
				background: #fafafa;
				flex-shrink: 0;
				/* 工具栏不收缩 */
			}

			.ql-container.ql-snow {
				border: 1px solid #e0e0e0;
				border-top: none;
				border-radius: 0 0 8px 8px;
				flex-grow: 1;
				/* 编辑器区域填充剩余空间 */
				overflow: hidden;
				/* 隐藏编辑器容器滚动条 */
			}

			.ql-editor {
				font-size: 16px;
				line-height: 1.6;
				color: #333;
				padding: 20px;
				height: 100%;
				overflow-y: auto;
				/* 只在内容过多时显示滚动条 */
			}

			.ql-editor.ql-blank::before {
				color: #999;
				font-style: normal;
				font-size: 16px;
			}

			/* 自定义滚动条样式 */
			.ql-editor::-webkit-scrollbar {
				width: 6px;
			}

			.ql-editor::-webkit-scrollbar-track {
				background: #f1f1f1;
				border-radius: 3px;
			}

			.ql-editor::-webkit-scrollbar-thumb {
				background: #c1c1c1;
				border-radius: 3px;
			}

			.ql-editor::-webkit-scrollbar-thumb:hover {
				background: #a8a8a8;
			}
		</style>
	</head>
	<body>
		<div id="editor-container">
			<div id="editor"></div>
		</div>

		<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
		<script type="text/javascript" src="uni.webview.1.5.5.js"></script>
		<script>
			console.log('开始初始化编辑器...');
			console.log('当前环境:uni， ' + typeof(uni))
			console.log('当前环境: window.uni ：' + typeof(window.uni))
			console.log('当前环境: window.parent：' + typeof(window.parent))
			console.log('当前环境: uni.webView：' + typeof(uni.webView))
			console.log('当前环境: uni.webView.postMessage：' + typeof(uni.webView.postMessage))

			// 统一的通信函数
			function postMessageToUni(data) {
				console.log('准备发送消息:', data);

				// 尝试多种通信方式 
				if (typeof uni !== 'undefined' && typeof uni.webView && uni.webView.postMessage) {
					console.log('使用 uni.webView.postMessage发送内容开始');
					console.log('消息内容序列化后：' + JSON.stringify(data));
					uni.webView.postMessage({
						data: data
					});
					console.log('使用 uni.webView.postMessage 发送内容结束');
					return;
				}
				// 方式1: uni postMessage
				if (typeof uni !== 'undefined' && uni.postMessage) {
					console.log('使用 uni.postMessage');
					uni.postMessage(messageData);
					return;
				}

				// 方式2: 直接调用 UniAppJSBridge (uni-app x 可能使用这种方式)
				if (typeof UniAppJSBridge !== 'undefined') {
					console.log('使用 UniAppJSBridge');
					UniAppJSBridge.postMessage(JSON.stringify(messageData));
					return;
				}

				// 方式3: 使用 window 的特定方法
				if (window.__uniApp__ && window.__uniApp__.postMessage) {
					console.log('使用 window.__uniApp__.postMessage');
					window.__uniApp__.postMessage(JSON.stringify(messageData));
					return;
				}

				// 方式4: 标准的 window.postMessage
				if (window.postMessage) {
					console.log('使用 window.postMessage发送内容开始');
					console.log('消息内容：' + messageData);
					console.log('消息内容序列化后：' + JSON.stringify(messageData));
					window.postMessage(JSON.stringify(messageData));
					console.log('使用 window.postMessage 发送内容结束');
				}
			}

			// 初始化 Quill 编辑器
			let quill;

			function initEditor() {
				try {
					quill = new Quill('#editor', {
						theme: 'snow',
						modules: {
							toolbar: {
								container: [
									[{
										header: [1, 2, 3, 4, 5, 6, false]
									}], // 标题 
									[{
										indent: "-1"
									}, {
										indent: "+1"
									}], // 缩进
									['bold', 'italic', 'underline', 'strike'],
									[{
										'list': 'ordered'
									}, {
										'list': 'bullet'
									}],
									[{
										color: []
									}, {
										background: []
									}], // 字体颜色、字体背景颜色  
									[{
										align: []
									}], // 对齐方式
									[{
										size: ["small", false, "large", "huge"]
									}], // 字体大小
									['link', 'image'],
									['clean']
								],
								handlers: {
									'image': function() {
										handleImageUpload();
									}
								}
							}
						},
						placeholder: '请输入文章内容...'
					});

					// 内容变化处理
					quill.on('text-change', function() {
						const html = quill.root.innerHTML;
						console.log("html:" + html)
						const text = quill.getText();
						const textLength = text.trim().replace(/\s+/g, '').length;

						postMessageToUni({
							type: 'contentChange',
							content: html,
							textLength: textLength
						});
					});

					// 发送就绪消息
					sendReadyMessage();

				} catch (error) {
					console.error('编辑器初始化失败:', error);
					// 发送错误消息
					postMessageToUni({
						type: 'editorError',
						error: error.toString()
					});
				}
			}

			// 图片上传处理
			function handleImageUpload() {
				postMessageToUni({
					type: 'imageUpload',
					data: {
						action: 'chooseImage'
					}
				});
			}

			// 发送就绪消息
			let readySent = false;

			function sendReadyMessage() {
				if (readySent) return;

				console.log('发送编辑器就绪消息');
				postMessageToUni({
					type: 'editorReady',
					timestamp: Date.now(),
					data: {
						toolsHeight: document.getElementById("editor").offsetTop
					}
				});
				readySent = true;
			}

			function clearContent() {
				quill.root.innerHTML = "";
			}
			//接收上传后的图片路径（全路径)
			function insertImage(imageUrl) {
				const range = quill.getSelection();
				const cursorPosition = range ? range.index : 0;
				quill.insertEmbed(cursorPosition.index, 'image', imageUrl); // 使用insertEmbed方法插入图片标签
				const nextLinePosition = cursorPosition + 2;
				quill.setSelection(nextLinePosition, 0);
			}

			// 页面加载完成后初始化
			document.addEventListener('DOMContentLoaded', function() {
				console.log('DOM 加载完成，开始初始化编辑器');
				setTimeout(initEditor, 100);
			});

			// 如果 DOM 已经加载完成，直接初始化
			if (document.readyState === 'complete' || document.readyState === 'interactive') {
				console.log('文档已就绪，直接初始化编辑器');
				setTimeout(initEditor, 100);
			}

			// 确保发送就绪消息
			setTimeout(sendReadyMessage, 1000);
			setTimeout(sendReadyMessage, 3000);

			console.log('编辑器脚本加载完成');
		</script>
	</body>
</html>